<template>
	<view class="container">
		<view v-if="showErrorTip" class="error" style="text-align: center;">
			<view class="error-text">{{errorData.btnText}}</view>
			<image :src="errorData.imgUrl" mode="widthFix" class="error-icon"></image>
			<!-- <view  class="error-btn">{{errorData.btnText}}</view> -->
		</view>
		<slot v-else name="content"></slot>
	</view>
</template>

<script>
	export default {
		props: {
			showErrorTip: {
				type: Boolean,
				default: false
			}
		},
		name: "index",
		data() {
			return {
				errorData: {
					type: 'network',
					content: '网络不给力，请再试一次',
					imgUrl: '/static/img/error-icon.png',
					btnText: '暂无数据，稍后再试'
				}
			}
		},
		methods: {}
	}
</script>

<style scoped lang="less">
	.error {
		width: 100%;
		height: calc(100vh - 60upx);
		background-color: #f1f1f1;
		text-align: center;
		// position: absolute;
		// bottom: 0;
		// top: 0;

		&-text {
			font-size: 28upx;
			color: #999;
			padding-top: 240upx;
		}

		&-icon {
			width: 145upx;
			margin-top: 60upx;
		}

		&-btn {
			width: 320upx;
			height: 80upx;
			line-height: 80upx;
			color: #fff;
			font-size: 28upx;
			background-color: #5ea1f8;
			border-radius: 8upx;
			margin: 80upx auto 0;
		}
	}
</style>
